<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="Access-Control-Allow-Origin" content="*">
		<meta http-equiv="content-security-policy">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<!-- build:css /css/main.css -->
		<link href="/css/mui.css" rel="stylesheet" />
		<link href="/css/iconfont.css" rel="stylesheet" />
		<link href="/css/common.css" rel="stylesheet" />
		<!-- endbuild -->
		<style>
			body,
			.mui-content,
			.product-list {
				background-color: #ccc;
			}

			.mui-content {
				height: auto;
			}

			.product-list .mui-table-view-cell {
				border-top: 0 none;
				border-bottom: 0 none;
				margin-bottom: 0;
			}

			.mui-slider .mui-slider-group .mui-slider-item img {
				width: 100%;
				margin: 0 auto;
			}

			.love {
				line-height: 20px;
				color: #676767;
				font-size: 12px;
				float: right;
			}

			.goodslist {
				font-size: 13px;
				color: #656565;
			}

			.mui-numbox {
				border-radius: 0;
				width: 120px;
				padding: 0 30px;
			}

			.mui-numbox [class*=mui-numbox-btn] {
				width: 30px;
			}

			.mui-numbox .mui-numbox-input {
				color: #303030;
			}

			#goodsImg .mui-slider-item>a:not(.mui-control-item) {
				height: 250px;
				text-align: center;
			}

			.mui-table-view-cell:after {
				left: 0;
			}

			.shoucang {
				float: right;
				border-left: 1px solid #d9d9d9;
				padding-left: 10px;
				font-size: 12px;
				color: #666;
				text-align: center;
				line-height: 17px;
			}

			.shoucang.act .icon-shoucang {
				color: #ff5200;
			}

			.mui-bar-tab {
				border-bottom: 0 none;
			}

			.mui-icon .mui-badge {
				line-height: 13px;
				height: 13px;
				min-width: 13px;
				padding: 0 3px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav u-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">商品详情</h1>
		</header>
		<nav class="mui-bar mui-bar-tab" id="fnav">
			<a class="mui-tab-item" data-id="index.html" data-url="index.html">
				<span class="mui-icon iconfont icon-icon-home" style="font-size:1.4em;"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" data-id="cart.html" data-url="cart.html">
				<span class="mui-icon iconfont icon-gouwuche1" style="font-size:1.4em;"></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-search" style="width: 1.5%;" id="cart">
				<span class="mui-tab-label" style="width:400px;display: inherit;background-color: #fe9402;padding: 15px 0;font-size: 13px;color: #fff;">加入购物车</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-user" style="width: 1.5%;" id="buy">
				<span class="mui-tab-label" style="width:400px;display: inherit;background-color: #e93429;padding: 15px 0;font-size: 13px;color: #fff;">立即购物</span>
			</a>
		</nav>

		<div class="mui-content">
			<div class="">
				<ul class="mui-table-view product-list hot-product-list" id="goodsImg">
					<li class="mui-table-view-cell mui-media" style="padding:0;overflow: hidden;">
						<div class="mui-slider">
							<div class="mui-slider-group" id="sliderLoops">
								<div class="mui-slider-item  mui-active"></div>
								<!--<div class="mui-slider-item"><a href="#"><img src="http://cdn.bestkeep.cn/goods/img/goods_1468567761222.jpg@130p_80q"></a></div>
						    	<div class="mui-slider-item"><a href="#"><img src="http://cdn.bestkeep.cn/goods/img/goods_1445394504916.jpg@130p_80q"></a></div>
						    	<div class="mui-slider-item"><a href="#"><img src="http://cdn.bestkeep.cn/goods/img/goods_1468567761222.jpg@130p_80q"></a></div>-->
							</div>
							<div class="mui-slider-indicator" id="sliderLoopActives">
								<!--<div class="mui-indicator mui-active"></div>
							<div class="mui-indicator"></div>-->
							</div>
						</div>
					</li>

					<li class="mui-table-view-cell mui-media" style="padding-bottom:8px; border-top:1px solid #cdcdcd">

						<div class="goods_name" id="goodsName"></div>
						<div class="shoucang">
							<span class="mui-icon iconfont icon-shoucang"></span><br />收藏</div>

					</li>
					<li class="mui-table-view-cell mui-media" style="padding-top:0;margin-bottom: -12px;">
						<a href="#">
							<div class="mui-media-body price" style="margin-top:20px;">
								<font id="priceHtml">本店价</font>：<span class="money" id="money" style="font-size:1.4em; color: #e15616; margin-right: 10px;"></span><del id="ut-money"></del><span class="love"> 5人喜欢</span></div>
						</a>
					</li>

				</ul>

				<ul class="mui-table-view mt-10">
					<li class="mui-table-view-cell">
						<a class="">
							购买数量&nbsp;&nbsp;
							<div class="mui-numbox">
								<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
								<input class="mui-numbox-input" readonly="readonly" id="number" type="number" value="1" />
								<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
							</div>
							<span class="mui-pull-right mt-10">库存：<font id="kucun"></font>件</span>
						</a>
					</li>
					<div class="standard" id="goodsCommentHtml">
						<div class="pattern">商品评价(1)<span>满意度99%</span></div>
							<div class="standard-body">
								A**望：<div style="float:right;"><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star ed"></span><span class="mui-icon mui-icon-star"></span><span class="mui-icon mui-icon-star"></span></div>
								<p >很好很好很好！买了几次了。</p>
								<p style="text-align: right;" id="times">2015-05-22 15:36:33</p>
							</div>
							<a class="go-btn">查看所有评论</a>
					</div >

					<div  class="standard clear">
						<h2 class="title">商品参数</h2>
						<h3><span>品牌</span><em id="brand"></em></h3>
						<h3><span>产地</span><em id="origin_place"></em></h3>
						<h3><span>重量(kg)</span><em id="weight"></em></h3>
					</div >
					<div class="imgbox"></div>
				</ul>
			</div>
		</div>

		<!-- build:js /js/vendor.js -->
		<script src="/js/mui.min.js"></script>
		<!-- bower:js -->
		<script src="/bower_components/mockjs/dist/mock.js"></script>
		<script src="/bower_components/zepto/zepto.js"></script>
		<script src="/bower_components/Zepto-Cookie/zepto.cookie.js"></script>
		<!--  endbower -->
		<!-- endbuild -->
		<!-- build:js /js/main.js -->
		<script src="/js/common.js"></script>
		<script src="/js/app.js"></script>
		<!-- endbuild -->
		<script type="text/javascript">
			var kucun = $('#kucun'); //库存
			var munberObj = $('#number');
			var goodsId = getQueryString('goodsId');
			var tokenVal = $.fn.cookie('token');
			console.log(goodsId)

			mui.ready(function() {
				$('body').on('tap', '.go-btn', function () {
        				openView('/goods-comment.html?goodsId='+goodsId, 'goods-comment.html');
      				});
				function cartNum() {
					_UserData = app.getUsers();
					if(isobj(_UserData)) {
						$.ajax({
							url: __BATE__ + 'api/cartTotal',
							data: {
								token: tokenVal
							},
							type:'post',
							success: function(json) {
								if(json == '') {
									$('.icon-gouwuche1').html();
								} else {
									$('.icon-gouwuche1').html('<span class="mui-badge mui-badge-danger">' + json.cart_total + '</span>')
								}
							}
						});
					}
				}
				cartNum();

				$('#buy').on('tap', function() {

					if(kucun.html() <= 0) {
						stip('没货啦~请持续关注 ！');
						return;
					}
					$.ajax({
						url: __BATE__ + 'api/confirmGoods',
						data: {
							qty: munberObj.val(),
							addr_id: 0,
							product_id: goodsId,
							token: tokenVal
						},
						type: 'post',
						success: function(json) {
								openView('/order.html?goodsId='+goodsId+'&goodsNum='+munberObj.val(), 'order.html')
						}
					});
				});

				$('#cart').on('tap', function() {
					if(kucun.html() <= 0) {
						stip('没货啦~请持续关注 ！');
						return;
					}
					$.ajax({
						url: __BATE__ + 'api/addToCart',
						data: {
							id: goodsId,
							qty: munberObj.val(),
							token: tokenVal
						},
						type: 'post',
						success: function(json) {
							if(json.ret_msg == true) {
								stip('添加成功');
								cartNum();

							} else if(json.ret_msg == "用户未登录") {
								stip(json.ret_msg);
								setTimeout(function() {
									toLoginView();
								}, 1000)
							} else if(json.ret_msg == "token验证无效或已过期") {
								stip(json.ret_msg);
								setTimeout(function() {
									toLoginView();
								}, 1000)
							} else {
								stip(json.ret_msg);
							}
						}
					});

				});

				mui('body').on('tap', '.shoucang', function() {
					_UserData = app.getUsers();
					if(!isobj(_UserData)) {
						toLoginView();
						return;
					}
					if($(this).attr('data-id')){
						cancelC($(this).attr('data-id'))
					}else{
						setC()
					}
//					return false;
				});


//删除
function cancelC(id){
	$.ajax({
					url: __BATE__ + 'api/cancelCollect',
					type: 'post',
					data: {
						collect_id: id,
						token: tokenVal
					},
					success: function(json) {
						if(json.ret_msg == true){
							$('.shoucang').removeClass('act');
							$('.shoucang').attr('data-id', '');
						}
					}
					})
}
//收藏
function setC(id){
$.ajax({
					url: __BATE__ + 'api/collect',
					type: 'post',
					data: {
						product_id: goodsId,
						token: tokenVal
					},
					success: function(json) {

							$('.shoucang').addClass('act')
							$('.shoucang').attr('data-id', json.collect_id)

					},
					error: function() {
						serverErr();
					}
				});
}


				//减
				mui('body').on('tap', '.mui-numbox-btn-minus', function() {
					var val1 = _int(munberObj.val());
					if(val1 <= 1) {
						munberObj.val(1);
						stip('购买数量不能小于1')
					}
				});
				//加
				mui('body').on('tap', '.mui-numbox-btn-plus', function() {
					var val2 = _int(munberObj.val());
					if(val2 >= kucun.html()) {
						munberObj.val(kucun.html());
						stip('购买数量不能大于库存数')
					}
				});
			});

			function isCollect() {
				$.ajax({
					url: __BATE__ + 'api/is_collect',
					type: 'post',
					data: {
						product_id: goodsId,
						token: tokenVal
					},
					success: function(json) {
						if(json.ret_msg == '已收藏'){
							$('.shoucang').addClass('act');
							$('.shoucang').attr('data-id', json.collect_id)
						}
					},
					error: function() {
						serverErr();
					}
				});
			}

			isCollect()

			function getGoodsInfo() {
				$.ajax({
					url: __BATE__ + 'api/productDetailsData',
					type: 'post',
					data: {
						id: goodsId
					},
					success: function(json) {
						var data = json.data;
						var introduction = data.introduction;
						var imgHtml = '<div class="mui-slider-item" style="text-align:center;"><img class="showEvent" src="' + data.productImages + '" /></div>';
						var ballHtml = '<div class="mui-indicator mui-active"></div>';
						var imgbox = '';
						for(var i = 0; i < introduction.length; i++) {
							imgbox += '<img src="' + introduction[i].img + '" />';
						}

						console.log(data)
						$('.imgbox').html(imgbox);
						$('#goodsName').html(data.goods_name);
						$('#money').html('￥' + data.price);
						$('#kucun').html(data.inventory);
						$('#brand').html(data.brand);
						$('#weight').html(data.weight);
						$('#origin_place').html(data.origin_place);

						$('#sliderLoops').html(imgHtml);
						$('#sliderLoopActives').html(ballHtml);
					},
					error: function() {
						serverErr();
					}
				});
			}
			getGoodsInfo()
		</script>
	</body>

</html>
